<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="商品名称">
            <el-select
              v-model="thing"
              placeholder="请选择你想要的商品"
              clearable
              value-key="itemName"
              @focus="focusSelect"
            >
              <el-option
                v-for="item in things"
                :key="item.itemId"
                :label="item.itemName"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select v-model="many" placeholder="件数" style="width: 80px">
              <el-option
                v-for="item in manys"
                :key="item.index"
                :label="item.index"
                :value="item.index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="detail">
            <div class="price">RMB:{{ price }}&nbsp;元</div>
            <div v-if="inventory == 0 && thing != ''" class="inventory">
              库存不足<a href="javascript:;" @click="addinven">(补充)</a>
            </div>
            <div v-else-if="inventory != 0 && thing != ''" class="inventory">
              库存{{ inventory }}件
            </div>
          </div>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="ButoonOk"
              @click="handleEnter"
              >加入订单</el-button
            >
          </el-form-item>
          <!-- <span v-if="number==0" class="inventory">库存不足</span>
          <span v-else class="inventory">价值库存{{number}}件</span> -->
        </el-form>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8" type="flex" justify="center">
      <el-col :span="4">
        <el-button
          type="success"
          round
          icon="el-icon-check"
          :disabled="disabledButton"
          @click="confirmSubmit"
        >
          提交订单
        </el-button>
      </el-col>
      <el-col :span="4">
        <el-button
          type="danger"
          round
          icon="el-icon-delete"
          @click="clearAllData"
          :disabled="disabledButton"
        >
          清空订单
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="未提交订单" name="first">
            <el-table :data="carList">
              <el-table-column
                label="序号"
                align="center"
                prop="itemId"
                width="55"
              />
              <el-table-column label="商品名称" align="center" prop="itemName" />
              <el-table-column label="个数" align="center" prop="many" />
              <el-table-column :label="`价格（总价：${allprice}元）`" align="center" prop="prices" />nihao
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已提交订单" name="second">
            <el-table :data="submitList">
              <el-table-column label="订单编号" align="center" prop="id" />
              <el-table-column label="创建日期" align="center" prop="date" />
              <el-table-column label="商品总个数" align="center" prop="many" />
              <el-table-column label="总价格" align="center" prop="prices" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//大致你可以理解为在远方有list仓库，里面有很多库存无限的货，然后第一次创建页面你会创建一个叫做0的本地仓库，从List仓库拿货。
//然后你的下拉框会从0的本地仓库加载数据，当你选择某个商品以后，你选择的商品不只它的名字，它的一切信息会被储存进一个叫thing的对象里
//然后库存会渲染到页面，数量下拉框根据库存自动生成，价格根据选择数量和单价计算得到总价，点击加入购物车以后，会创建一个叫做1的购物车仓库
//进行各种判断操作详见源码，清空订单会把购物车仓库清空，提交订单会创建2的订单仓库根据1的仓库生成一系列数据，同时生成3的统计数据仓库
import storage from "store"; //引入一个很有用的库
export default {
  name: "Borrow",
  data() {
    return {
      many: 1,  //下拉框选择的数量
      things: [], //物品下拉框选项
      thing: "",   //选择的物品，注意是一个对象
      carList: storage.get("1"), //初次加载时加载购物车的物品
      activeName: "first",        //当前是待提交订单页面还是已提交订单页面
      submitList: storage.get("2"),  //已提交订单页面数据
      list:[                   //物品数据
        {itemId:1,itemNo:978005,itemName:"牙刷",price:12,inventory:13},
        {itemId:2,itemNo:978008,itemName:"牛奶",price:25,inventory:60},
        {itemId:3,itemNo:978009,itemName:"杯子",price:50,inventory:30},
        {itemId:4,itemNo:978010,itemName:"毛巾",price:100,inventory:40},
        {itemId:5,itemNo:978011,itemName:"手机",price:6000,inventory:33},
      ],
      allprice:0
    };
  },
  created() {
    this.getAllThing();    //初次加载时加载数据
  },
  computed: {
    inventory() {
      return this.thing.inventory;          //计算选择的物品是库存
    },
    ButoonOk() {
      if (this.thing != ""&& this.inventory != 0) return false;     //计算加入购物车按钮是否可用，要满足选了物品并且库存充足
      else return true;
    },
    manys() {
      let manys = new Array();                           
      for (let i = 1; i <= this.thing.inventory; i++) {           //下拉框根据当前库存生成数组，填入下拉表，这样下拉框的最大值不会超过库存
        manys.push({ index: i });
      }
      console.log(manys);
      return manys;
    },
    price() {                                               //计算当前选择物品的价格
      console.log(typeof this.thing.price);
      if (this.thing == "") return 0;
      else return this.thing.price * this.many;
    }, 
    disabledButton() {                                    //计算提交订单和消除订单是否可用
      if (this.carList != null) return false;
      else return true;
    },
  },
  methods: {
    updatePrice(){
      let allpri=0
      if(storage.get('1')!=null)
        storage.get("1").map(item=>{
          allpri+=item.prices
        })
        this.allprice=allpri
    },
    addinven(){               //补充库存，去this.list补充 //关键在于0仓库和this.things和this.thing都要多次获得，所以要经常去更新this.getAllThing()和this.thing
      // this.getAllThing()      //不更新的主要原因在于下拉表的指针是新的，而thing对象的指针还是原来的,突然想到不如只补充inventory
      this.list.map(item=>{       //其实主要问题是this.thing和0仓库的分离完全没必要，也不会出现No和itemNo的混乱不过我懒得改了，这里需要再次捕获
        if(item.itemNo==this.thing.itemNo) this.thing.inventory=item.inventory
      })
      storage.set('0',storage.get('0').map(item=>{
        if(item.itemNo==this.thing.itemNo)  item.inventory=this.thing.inventory
        return item
      }))
      this.getAllThing()
    },
    focusSelect(){               //点击物品下拉框后切换到购物车页面
      this.activeName="first"
    },
    updateList() {               //更新一下购物车，因为storage是对象，没法监测
      this.carList = storage.get("1");
    },
    updatesubmit(){                 //更新一下已提交订单页面
      this.submitList=storage.get('2')
    },
    getAllThing() {                   //拿到所有物品对象放进下拉框里
      if(storage.get("0")==null) storage.set('0',this.list) //第一次时把完整商品List(可以理解为远处库存，拉到本地，作为0)
      this.things=storage.get('0')   //后面都是先从本地0看货，除非补充库存时和提交订单商品库存减少会改动这个
      this.updatePrice()    //刷新总价，它是相对独立的
    },
    handleEnter() {                   //当你点击加入购物车以后
      //把订单切换为购物车页面   
      this.activeName="first"
      //flag是判断有重复的，.more是判断是否超库存的
      let flag = true;
      //如果是第一次创建购物车的物品，则创建本地购物车储存
      if (storage.get("1") == null)
        storage.set("1", [
          { ...this.thing, many: this.many, prices: this.price, more: true },//this.thing是选择物品的一系列属性都拿过来后面会很有用
        ]);
      else {
        //否则先遍历加入购物车的这个东西有没有在购物车里有，如果有的话叠加购买个数，并且把flag设为false
        //如果没有的话flag会一直为true，并且会往本地购物车储存里加多一个这个商品
        //叠加时同时进行购买数量的判断，如果购买数量超过了库存量，那么会提示，并且把该物品的附带属性more设为false，意思是不能再进行购买数量添加
        //后续叠加时也不会再进行叠加，但是要注意的因为购买数量变成了字符串，后续提交订单计算总金额时需要重新变成数字类型
        let s = storage.get("1").map((item) => {
          if (item.itemNo == this.thing.itemNo) {
            if (item.more == true){item.many = item.many + this.many;item.prices = item.prices + this.price;}
            if (item.many > item.inventory) {
              item.prices=item.inventory*(item.prices/item.many)
              item.many = item.inventory + "(已超过最大库存，请勿再添加)";
              item.more = false;
            }
            
            flag = false;
          }
          return item; //不管有没有都一定要返回否则不是这个No的会不返回
        });
        console.log(s);
         //如果没有的话flag会一直为true，并且会往本地购物车储存里加多一个这个商品
        if (flag == true) {
          storage.set(
            "1",
            storage
              .get("1")
              .concat([
                {
                  ...this.thing,
                  many: this.many,
                  prices: this.price,
                  more: true,
                },
              ])
          );
        } else {
          //否则就把刚刚叠加成功的数量重新设置对象
          storage.set("1", s);
        }
      }
      this.updateList();  //刷新购物车
      console.log("我曹");
      flag = true; //记得设回来
      this.many=1 //把数量变成1
      this.updatePrice()    //刷新总价，它是相对独立的
    },
    confirmSubmit() {         //当你点击提交订单以后
      let id = Math.floor(Math.random() * 100 + 1);     //生成随件订单号
      let mydate = new Date();      
      let date = "" + mydate.getFullYear() + "-";
      date = date+mydate.getMonth() + "-";
      date =date+ mydate.getDate() + "  ";
      date =date+ mydate.getHours() + ":";
      date =date+ mydate.getMinutes() + ":";
      date = date+mydate.getSeconds() + "";              //计算日期
      let allprice=0                                    //总价
      let allmany=0                                     //总数量
      //遍历购物车每一个东西计算总价和总数量
      this.carList.map((item) => {
        allprice=allprice+item.prices
        //超库存的数量是字符串要变回来
        if(typeof(item.many)=="string"){
          item.many=item.inventory
        }
        allmany=allmany+item.many
        let flag=false  //一定要设true，因为每次item都会来要
        // 这个是那个圆盘图要用的，要把购买数据进行处理存进本地,同样flag的作用是查看本地统计数据里是否已经有该商品,，有的话
        //叠加同时flag为true，不然flag为false在统计数据里添加改商品数据
        if(storage.get("3")==null){storage.set("3",[{name:item.itemName,value:item.many}])} //第一次
        else{
          storage.set("3",storage.get("3").map(i=>{
          if(i.name==item.itemName){i.value=item.many+i.value;flag=true}
          return i
        }))
        if(flag==false) storage.set("3",storage.get("3").concat([{name:item.itemName,value:item.many}]))
        }
        // 对当前item商品的本地商品库存进行更新,你会发现遍历的时候每个商品的库存都进行更新
        storage.set("0",storage.get('0').map(it=>{
          if(it.itemNo==item.itemNo){
            it.inventory=item.inventory-item.many
          }
          return it
        }))
        this.getAllThing()  //刷新下拉框物品的对象，特别是库存本身，即对上面的做出反应，更新this.things
        this.thing=""       //把下拉框选的删掉
      });
      //对已提交订单数据做出更新并渲染到页面
      if(storage.get('2')==null) storage.set('2',[{id:id,date:date,prices:allprice,many:allmany}])
      else storage.set("2",storage.get("2").concat([{id:id,date:date,prices:allprice,many:allmany}]))
      this.updatesubmit() //更新已提交页面
      storage.remove("1")//把购物车清空
      this.activeName="second"//切换到已提交订单页面
      this.updateList();     //更新购物车
      this.updatePrice()    //刷新总价，它是相对独立的
    },
    
    clearAllData() {    //清除订单
      storage.remove("1");
      this.updateList();
      this.updatePrice()    //刷新总价，它是相对独立的
    },
  },
};
</script>

<style  scoped>
.app-container {
  margin-top: 50px;
}
.card-panel-num1 {
  font-size: 30px;
  color: #40c9c6;
}
.card-panel-num2 {
  font-size: 40px;
  color: #eb0f0f;
}
.mb8 {
  margin-bottom: 8px;
}
.detail {
  width: 120px;
  display: inline-block;
  margin-left: 10px;
}
.price {
  font-size: 18px;
  text-align: left;
}
.inventory {
  width: 70%;
  font-size: 12px;
  color: #ff0000;
  text-align: left;
}
.el-input__inner {
  width: 30px !important;
}
</style>
